<template>
	<view class="content bg-#F6F9F8 h-100vh photo-white">

		<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" theme="white" />
		<view class="photo-list">

			<view class="list-box">

				<view class="photo-list_one" v-for="(item,index) in photoList" v-if="photoList.length !=0">
					<view class="photo-list_one_img" v-if="item.state == 'complete'"
						@click="this.navigateTo(`/pagesB/photo/photo_step_4?id=`+item.id);">
						<image :src="item.merge_thumbnail_full" />
					</view>

					<view class="photo-list_one_text" v-if="item.state == 'complete'"
						@click="this.navigateTo(`/pagesB/photo/photo_step_4?id=`+item.id);">
						<view class="photo-list_one_text_title">{{item.title}}</view>
						<view class="photo-list_one_text_more_div" @click.stop="doSome('open',index)">
							<view class="photo-list_one_text_more">
								<view class="photo-list_one_text_more_1" style="margin-top: 6rpx;"></view>
								<view class="photo-list_one_text_more_1"></view>
								<view class="photo-list_one_text_more_1"></view>
							</view>
						</view>

					</view>
					<view class="photo-list_one_date" v-if="item.state == 'complete'"
						@click="this.navigateTo(`/pagesB/photo/photo_step_4?id=`+item.id);">
						{{item.format_str}}
					</view>

					<view class="photo-list_one_img_fail" v-if="item.state == 'fail'">
						<view class="photo-list_one_img_fail_1">
							<image src="/static/images/photo_31.png" />
							<text>生成失败</text>
						</view>
					</view>

					<view class="photo-list_one_text" v-if="item.state == 'fail'">
						<view class="photo-list_one_text_title" style="color: #999;">{{item.title}}</view>
						<view class="photo-list_one_text_more_div" @click.stop="doSome('open',index)">
							<view class="photo-list_one_text_more">
								<view class="photo-list_one_text_more_1"
									style="margin-top: 6rpx;background-color: #999;"></view>
								<view class="photo-list_one_text_more_1" style="background-color: #999;"></view>
								<view class="photo-list_one_text_more_1" style="background-color: #999;"></view>
							</view>
						</view>

					</view>

					<view class="photo-list_one_img_fail" v-if="item.state == 'wait' || item.state == 'merging'">
						<view class="photo-list_one_img_fail_1">
							<image src="/static/images/photo_24.gif" />
							<text>生成中...</text>
						</view>

					</view>
				</view>
				<!-- <view v-if="photoList.length == 0" class="list-nodata">暂无数据</view> -->
				
				
			</view>
			
			<u-empty v-if="photoList.length == 0"
			 icon="/static/images/no_punch.png"
			 mode="list" text="暂无数据"
			 marginTop="120px"
			 ></u-empty>


		</view>

		<uni-popup ref="popup" type="bottom" border-radius="24px 24px 0 0">
			<view class="photo_5_footer_main">
				<view class="photo_5_footer_main_one red" @tap="del_photo">
					删除
				</view>
				<view class="photo_5_footer_main_line"></view>
				<view class="photo_5_footer_main_one" @tap="doSome('close')">
					取消
				</view>
				<view class="photo_5_footer_main_line" style="background-color: #fff;height: 50rpx;"></view>
			</view>

		</uni-popup>


	</view>

</template>

<script>
	import {
		navigateTo,
		navigateBack
	} from "@/hooks";
	import custom_navbar from "./components/photo.vue";
	import {
		aiPhotoList,
		aiPhotoDel
	} from '@/api/home';
	// import uParse from '@/components/u-parse/u-parse.vue';
	import store from "@/store";



	export default {
		components: {
			custom_navbar
			// uParse
		},
		data() {
			return {

				navigateTo,
				navigateBack,
				navbar_title: "AI合影",
				statusBarHeight: 20,
				curPage: 0,
				total: 0,
				photoList: [],
				del_index: ''

			};
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			}

		},


		mounted() {
			let that = this;
			const info = uni.getSystemInfoSync();
			that.statusBarHeight = info.statusBarHeight + 43;

		},

		onLoad(options) {
			this.getList();

		},


		onShow() {

		},


		onReachBottom() {
			this.loadMore();
		},


		methods: {

			loadMore() {

				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getList();
				}
			},
			// 获取头的高度
			getNavHeight(e) {
				this.NavHeight_infoHeight += e;
			},

			// 将时间戳转换为刚刚、几分钟前、几小时前、几天前
			fromTime: function(time) {
				time = new Date(time).getTime();
				if (time < 90000000000) {
					time *= 1000;
				}
				var timer = new Date().getTime() - time;
				timer = parseInt(timer / 1000);
				if (timer < 180) {
					return '刚刚';
				} else if (timer >= 180 && timer < 3600) {
					return parseInt(timer / 60) + '分钟前';
				} else if (timer >= 3600 && timer < 86400) {
					return parseInt(timer / 3600) + '小时前';
				} else if (timer >= 86400 && timer < 2592000) {
					return parseInt(timer / 86400) + '天前';
				} else {
					return this.toDate(time, 'str');
				}
			},
			// 时间戳转换为日期时间
			toDate: function(timeStamp, returnType) {
				timeStamp = parseInt(timeStamp);
				var date = new Date();
				if (timeStamp < 90000000000) {
					date.setTime(timeStamp * 1000);
				} else {
					date.setTime(timeStamp);
				}
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				if (returnType == 'str') {
					return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
				}
				return [y, m, d, h, minute, second];
			},


			async getList() {
				let params = {
					page: this.curPage + 1,
					limit: 10,

				};
				let res = await aiPhotoList(params);
				if (res.code == 200) {
					this.curPage = params.page;

					this.total = res.data.total;
					let datas = [...this.photoList];
					if (params.page > 1) {
						datas.push(...res.data.data)
					} else {
						datas = res.data.data;
					}
					datas.map(item => {
						if (item.merge_img) {
							item.merge_img_full = this.rec_url + item.merge_img;
						}
						if (item.merge_thumbnail) {
							item.merge_thumbnail_full = this.rec_url + item.merge_thumbnail;
						}

						item.format_str = this.fromTime(item.create_time);


						return item;
					})
					this.photoList = datas;

				}
			},


			doSome(do_type, index = '') {
				switch (do_type) {
					case 'open':

						this.del_index = index;
						this.$refs.popup.open('bottom')
						break;
					case 'close':
						this.del_index = '';
						this.$refs.popup.close();
						break;
				}

			},

			async del_photo() {

				if (!this.del_index || !this.photoList[this.del_index]) {
					uni.showToast({
						title: '获取ID失败!',
						icon: 'none',
					});
					return false;
				}

				this.$refs.popup.close();
				let that = this;
				let id = this.photoList[this.del_index].id;


				uni.showModal({
					title: '提示',
					content: '您确定要删除吗?',
					confirmText: '删除',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							})
							aiPhotoDel({
								id: id
							}).then((res) => {

								that.photoList.splice(this.del_index, 1);
								uni.hideLoading();

							})



						} else if (res.cancel) {
							this.$refs.popup.close();
						}
					}
				})


			}

		}
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';


	image {
		width: 100%;
		height: 100%;
	}

	.photo-list {
		margin-top: 30rpx;
		width: 100%;


		.list-box {
			width: 94%;
			margin-left: 3%;


			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.list-nodata {
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 32rpx;
		}
	}


	// --------------------------setp5------------------------
	.photo-list_one {
		width: 340rpx;
		height: 522rpx;

		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;

		.photo-list_one_img {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;

			image {
				border-radius: 16rpx;
			}

			z-index: -9
		}

		.photo-list_one_img_fail {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;

			image {
				border-radius: 16rpx;
			}

			z-index: -9;
			display: flex;
			align-items:center;
			justify-content: center;
			flex-wrap: wrap;

			.photo-list_one_img_fail_1 {
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				margin-top: 200prx;
				justify-content: center;

				image {
					width: 70rpx;
					height: 63rpx;
				}

				text {
					color: #999;
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}



		}

		.photo-list_one_text {
			z-index: 99;
			margin-top: -80rpx;
			width: 94%;
			margin-left: 3%;
			display: flex;
			justify-content: space-between;

			.photo-list_one_text_title {
				font-size: 28rpx;
				font-weight: 500;
				color: #fff;
				width: 80%;
				height: 40rpx;
				line-height: 40rpx;
				overflow: hidden;
				// line-height: 30rpx;
				// height:50rpx;
			}

			.photo-list_one_text_more_div {
				width: 32rpx;

				display: flex;
				justify-content: center;

				.photo-list_one_text_more {
					width: 10rpx;
					display: flex;
					flex-wrap: wrap;

					.photo-list_one_text_more_1 {
						width: 6rpx;
						height: 6rpx;
						background-color: #fff;
						border-radius: 50%;
						margin-bottom: 7rpx;

					}
				}
			}

		}

		.photo-list_one_date {
			font-size: 22rpx;
			margin-top: 0rpx;
			color: #fff;
			width: 94%;
			margin-left: 3%;
		}
	}

	.photo_5_footer_main {

		min-height: 200rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.photo_5_footer_main_one {
			height: 90rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #666;
		}

		.red {
			color: #F54242;
		}

		.photo_5_footer_main_line {
			width: 100%;
			height: 12rpx;
			background-color: #F6F9F8;
		}
	}
</style>